<template>
    <div>
        <div class="box">
            <div class="box-image">
                <img  :src="movie.poster"/>
            </div>
            <div class="box-content">
                <div>{{movie.name }}</div>
                <div>观众评分:{{movie.grade }}</div>
                <div>主演:{{movie.actors.map(actor =>actor.name).join(",")}}</div>
                <div>{{movie.category }}|{{movie.runtime }}分钟</div>
            </div>
            <div class="box-btn">
                <slot>
                    <button>购票</button>
                </slot>
            </div>
        </div>

    </div>
</template>

<script>
export default {
    props:{
        movie:Object
    }
};
</script>

<style scoped lang="less">
.box {
    display: flex;
    height: 9.375rem;
    &-image {
        flex: 1;
        img {
           width: 90%;
           height: 7.5rem;
        }
    }
    &-content {
        flex: 3;
    }
    &-btn {
        flex: 1;
        align-self: center;
    }
}
</style>
